Skip to content

PCA-016 Catalog#2

Open
Captain-DAB wants to merge 6 commits into
devfrom
PCA-016
Open

PCA-016 Catalog#2
Captain-DAB wants to merge 6 commits into
devfrom
PCA-016

Conversation

@Captain-DAB
Copy link
Copy Markdown
Collaborator

@Captain-DAB Captain-DAB commented Oct 20, 2023

In this PR, I was able to do the following:
-Created responsive Catalog for courses

Link to the tickets

Qoosim
Qoosim requested changes Oct 21, 2023
View reviewed changes
Copy link
Copy Markdown
Owner

@Qoosim Qoosim left a comment •
edited by diremu
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Status: Required Changes ♻️

Hi @Captain-DAB,

Good job so far!
There are some issues that you still need to work on to go to the next project but you are almost there!

Highlights

  • Implemented some ticket requirements. ✔️
  • Fair file structure approach. ✔️

Required Changes ♻️

Check the comments under the review.

  • It is highly recommended to provide alt=" " with value for it provides visually impaired visitors with an alternative to images. Kindly use it here 👇

Alternative to image

alt

  • It is also part of best practices to to follow pascal name convention for naming our component. Every letter should start with capital letter. It should be Catalog.jsx. Kindly change that too.

name

Optional suggestions

N/A

Cheers and Happy coding!👏👏👏

Comment thread src/components/Catalog/catalog.css
}
@media (max-width: 768px) {
.courses-catalog {
padding: 20px 3%;
Copy link
Copy Markdown
Owner

@Qoosim Qoosim Oct 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Let's try to be consistent about the unit we adapt. That's the best practices. You can use px, rem, %, just be consistent about any one you choose at a point.

Comment thread src/components/Catalog/catalog.css Outdated
Comment on lines +42 to +44
.catalog:hover {
transform: translate(-5px, -20px);
}
Copy link
Copy Markdown
Owner

@Qoosim Qoosim Oct 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Let's hold on about animation for now. Kindly remove it. We might need to use a package later to add animation in a very cool way.

Comment thread src/components/Catalog/catalog.css Outdated
Comment on lines +37 to +41
.catalog {
padding: 20px;
background: rgba(245, 245, 220, 0.779);
transition: 0.5s;
}
Copy link
Copy Markdown
Owner

@Qoosim Qoosim Oct 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • It is required to produce a close replica of what we have on the figma design. This includes color, font, typograph, background color, layout. The background color on your design does not tally to what we have on the figma. Kindly check the color and apply accordingly. This is the color use for the cards #F6F2F2

Your Design

your-design

Figma Design

figma-design

Comment thread src/components/Catalog/catalog.css
Comment on lines +34 to +36
.yellow-text {
color: rgb(238, 241, 38);
}
Copy link
Copy Markdown
Owner

@Qoosim Qoosim Oct 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • This is the color for this text #FFCA1A. Kindly apply it accordingly.

Comment thread src/components/Catalog/catalog.jsx Outdated
Comment on lines +8 to +57
const [catalogs, setCatalog] = useState([
{
image: smartphone,
title: "Web & Mobile Development",
body: "Master the art of web and mobile application development. Create dynamic, responsive websites and apps that leave a loating impressions.",
id: 1,
},
{
image: code,
title: "Programming Essential",
body: "Dive into the world of coding with our beginner-friendly programming courses. Learn the fundamental of popular programming languages and build a strong foundation.",
id: 2,
},
{
image: layout,
title: "UI/UX Design",
body: "Design user friendly interfaces and captivating user experiences. Develop the skills to enable desigs that resonate with users.",
id: 3,
},
{
image: database,
title: "Data Analysis",
body: "Make data-driven decisions. Our data analysis courses will teach you how to extract insights frown data and drive business success",
id: 4,
},
{
image: database,
title: "Data Analysis",
body: "Make data-driven decisions. Our data analysis courses will teach you how to extract insights frown data and drive business success",
id: 5,
},
{
image: layout,
title: "Graphics Design",
body: "Design user friendly interfaces and captivating user experiences. Develop the skills to enable desigs that resonate with users.",
id: 6,
},
{
image: code,
title: "Programming Essential",
body: "Dive into the world of coding with our beginner-friendly programming courses. Learn the fundamental of popular programming languages and build a strong foundation.",
id: 7,
},
{
image: smartphone,
title: "Web & Mobile Development",
body: "Master the art of web and mobile application development. Create dynamic, responsive websites and apps that leave a loating impressions.",
id: 8,
},
]);
Copy link
Copy Markdown
Owner

@Qoosim Qoosim Oct 21, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • There's no need to use useState here. We don't make any state changes on the page at this moment. The best approach for this is to create a file say catalogData.js then create an array of objects and import it inside your Catalog component to use. It should look something similar to this. 👇
  export const catalogData = [
     {
      image: smartphone,
      title: "Web & Mobile Development",
      body: "Master the art of web and mobile application development. Create dynamic, responsive websites and apps that leave a loating impressions.",
      id: 1,
    },
    {
      image: code,
      title: "Programming Essential",
      body: "Dive into the world of coding with our beginner-friendly programming courses. Learn the fundamental of popular programming languages and build a strong foundation.",
      id: 2,
    },
    {
      image: layout,
      title: "UI/UX Design",
      body: "Design user friendly interfaces and captivating user experiences. Develop the skills to enable desigs that resonate with users.",
      id: 3,
    },
    {
      image: database,
      title: "Data Analysis",
      body: "Make data-driven decisions. Our data analysis courses will teach you how to extract insights frown data and drive business success",
      id: 4,
    },
    {
      image: database,
      title: "Data Analysis",
      body: "Make data-driven decisions. Our data analysis courses will teach you how to extract insights frown data and drive business success",
      id: 5,
    },
    {
      image: layout,
      title: "Graphics Design",
      body: "Design user friendly interfaces and captivating user experiences. Develop the skills to enable desigs that resonate with users.",
      id: 6,
    },
    {
      image: code,
      title: "Programming Essential",
      body: "Dive into the world of coding with our beginner-friendly programming courses. Learn the fundamental of popular programming languages and build a strong foundation.",
      id: 7,
    },
    {
      image: smartphone,
      title: "Web & Mobile Development",
      body: "Master the art of web and mobile application development. Create dynamic, responsive websites and apps that leave a loating impressions.",
      id: 8,
    },  
  ]

You can create the file inside your catalog folder.

Comment thread src/components/Catalog/catalog.jsx Outdated
Comment on lines +2 to +5
import database from "./Images/database-icon.png";
import smartphone from "./Images/smartphone-icon.png";
import code from "./Images/code-icon.png";
import layout from "./Images/layout-icon.png";
Copy link
Copy Markdown
Owner

@Qoosim Qoosim Oct 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • The path to these files are incorrect. There was an error message when I tested your app cos of their path. It should be like this. 👇
  import database from "../../Images/database-icon.png";
  import smartphone from "../../Images/smartphone-icon.png";
  import code from "../../Images/code-icon.png";
  import layout from "../../Images/layout-icon.png";

@Captain-DAB
Copy link
Copy Markdown
Collaborator Author

Captain-DAB commented Oct 21, 2023 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Qoosim Qoosim Qoosim requested changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Captain-DAB @Qoosim